.c3p(@key,@value){
  -webkit-@{key}:@value;
  -moz-@{key}:@value;
  -ms-@{key}:@value;
  -o-@{key}:@value;
  @{key}:@value;
}

.background(
  @attachment:scroll;
  @color:transparent;
  @clip:border-box;
  @img:none;
  @origin: padding-box;
  @positionX:center;
  @positionY:center;
  @repeat:no-repeat;
  @size:100% 100%;
  ){
  background-attachment:@attachment;
  background-color:@color;
  .c3p(background-clip,@clip);
  background-image:@img;
  .c3p(background-origin,@origin);
  background-position:@positionX @positionY;
  background-repeat:@repeat;
  .c3p(background-size,@size);
  //部分css3属性，防止某些浏览器不给力，要加前缀
}
.imageReset(){
  //img{visibility: hidden}
  //img[src]{visibility: visible;}
  //用于懒加载的优化，需要不写src属性
  //上面是张鑫旭的建议，但实战发现并不容易自己主导形成这种生态，现取消
  img::after{
    //生成alt信息
    content: attr(alt);
    //尺寸和定位
    position: absolute;
    bottom:0;
    width:100%;
    background-color:rgba(0,0,0,0.5);
    //过渡动画效果
    transform: translateY(100%);
    transition:transform 0.2s;
  }
  img:hover::after{
    transform: translateY(0);
    //alt信息显示
  }
}

.box-padding(@w,@h){
  .box-@{w}b@{h}{//俗称宽高比；
    &:before{
      content: '';
      display:block;
      padding-bottom:percentage(@h/@w);
    }
  };
};

.box-padding(sp){
  .box-gold{
    &:before{
      content: '';
      display:block;
      padding-bottom:percentage( (sqrt(5)-1)/2);
    }
  }
  .box-silver{
    &:before{
      content: '';
      display:block;
      padding-bottom:percentage( sqrt(2)/2);
    }
  }
}

.imgbox(@className){
  @{className}{
    &-box{position: relative;overflow: hidden;}
    &-inline {
      position: relative;display: inline-block;
      *display: inline;zoom: 1;vertical-align: middle;
      max-width: 100%;*width: 100%;height: auto;
      border: none;
    }
    &-center {
      position: absolute;top:0;bottom:0;left:0;right:0;
      display: block;
      max-width: 100%;width: auto;*width: 100%;
      max-height: 100%;height: auto;*height: 100%;  
      margin:auto;border: none;
    }
    &-max {display: block;width: 100%;height: 100%;border: none;}
    &-cover {
      display: block;
      position: absolute;
      top:0;bottom:0;left:0;right:0;
      max-width:none;width: 100%;*width: 100%;
      max-height:none;height: 100%;*height: 100%;
      margin:auto;
      border: none;
      object-position: 50% 50%;
      object-fit: cover;
    }
  }
}
.iframe-box(){.iframe-box{.c3p(user-select,none);}}

.def(img){
  .imageReset();
  .imgbox(~'.img');
  .imgbox(~'.video');
  .box-padding(5,1);//20
  .box-padding(4,1);//25
  .box-padding(3,1);//33
  .box-padding(5,2);//40
  .box-padding(2,1);//50
  .box-padding(16,9);//56.25
  .box-padding(5,3);//60
  .box-padding(3,2);//66
  .box-padding(4,3);//75
  .box-padding(5,4);//80
  .box-padding(1,1);//100
  .box-padding(sp);
}
// .def(img);

// 部分模块跳级直升3.0
// 3.0以上版本部分模块设定.def(模块名)方法用于导入时默认调用，
// 节约常规调用时间

// 修改box-padding的计算，
// 由原来的div计算padding转before计算padding，
// 用于节约dom节点，
// 并引入若干参数用于计算
// 利用新增的sqrt做开方计算